<template>
  <div class="festival_main">
    <a-card title="硒都节日" class="card_main">
      <a-card
        hoverable
        style="width: 30em;margin:10px 10px"
        v-for="item in festivalData"
        :key="item.id"
        class="card_list"
        @click="add_festival(item)"
      >
        <template #cover>
          <img alt="example" :src="item.imageUrl" />
        </template>
        <a-card-meta :title="item.name">
          <template #description>
            <p>{{ item.time }}</p>
            <p>{{ item.description }}</p>
          </template>
        </a-card-meta>
      </a-card>
    </a-card>
    <a-modal
      v-model:visible="dialogStatu"
      title="添加美食"
      @ok="handleOk"
      ok-text="修改"
      cancel-text="取消"
      width="50em"
      destroyOnClose
      :confirmLoading="addLoading"
    >
      <div style="width: 100%">
        <a-form
          :model="formState"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-item label="节日名称">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="节日时间">
            <a-date-picker
              v-model:value="formState.time"
              style="width: 100%"
              placeholder="请选择日期"
            />
          </a-form-item>
          <a-form-item label="节日描述">
            <a-textarea autosize v-model:value="formState.description" />
          </a-form-item>
          <a-form-item label="节日图片">
            <a-upload
              list-type="picture"
              v-model:file-list="picList"
              :beforeUpload="() => false"
              :disabled="picList.length >= 1"
            >
              <a-button @click="handleChange">
                <upload-outlined></upload-outlined>
                选择图片
              </a-button>
              <a-button
                @click="removePic"
                style="margin-left: 10px"
                v-show="picList.length >= 1"
              >
                删除图片
              </a-button>
            </a-upload>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, UnwrapRef, reactive } from "vue";
import { customsList, updateCustoms } from "@/utils/fetch/api";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { formatDate } from "./time";
interface FormState {
  name: string;
  time: string;
  description: string;
  image: any;
	id:any
}
export default defineComponent({
  components: { PlusCircleOutlined },
  setup() {
    const loading = ref<any>(false);
    const festivalData = ref<any>();
    const refresh = async () => {
      const data = await customsList({ pageNum: 1 });
      festivalData.value = data.data.data;
    };
    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });

    const add_festival = (item:any) => {
			picList.value = []
			formState.name = item.name
			formState.description = item.description
			formState.time = item.time
			picList.value.push({thumbUrl:item.imageUrl})
			formState.id = item.id
			formState.image = item.imageUrl

      dialogStatu.value = true;
    };
    const addLoading = ref<boolean>(false);
    const dialogStatu = ref<boolean>(false);

    const handleOk = async () => {
      if (formState.name.length <= 0) {
        message.warning("请填写美食名称！");
        return;
      }
      if (formState.description.length <= 0) {
        message.warning("请填加美食描述！");
        return;
      }
      if (picList.value.length <= 0) {
        message.warning("请选择美食展示图片！");
        return;
      }

			let oldFormData:any; 
			festivalData.value.forEach((item:any)=>{
				if(item.id==formState.id){
					oldFormData=item
					return
				}
			})
			if((formState.name==oldFormData.name)
				&&(formState.description==oldFormData.description)
				&&(formState.time==oldFormData.time)
				&&(!picList.value[0].originFileObj)
			){
				message.warning("没有可以修改的内容！");
				return
			}
      addLoading.value = true;
      const formdata: any = new FormData();
      formdata.append("name", formState.name);
      formdata.append("description", formState.description);
      formdata.append("time", formatDate(formState.time));
			if(picList.value[0].originFileObj){
				formdata.append("image", picList.value[0].originFileObj);
			}
			formdata.append("id", formState.id);
      try {
        const data = await updateCustoms(formdata);
        message.success("添加完成！");
        refresh();
        setTimeout(() => {
          dialogStatu.value = false;
        }, 1000);
      } catch (err) {
        console.error(err);
      } finally {
        addLoading.value = false;
      }
    };
    onMounted(() => {
      loading.value = true;
      refresh();
      loading.value = false;
    });

    const picList = ref<any>([]);
    const formState: UnwrapRef<FormState> = reactive({
      name: "",
      description: "",
      image: "",
      time: "",
			id:""
    });

    const handleChange = () => {
      if (picList.value.length >= 1) {
        message.warning("只能选择一张图片！");
      }
    };
    const removePic = () => {
      picList.value = [];
    };

    return {
      festivalData,
      add_festival,
      dialogStatu,
      handleOk,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      picList,
      handleChange,
      removePic,
      addLoading,
    };
  },
});
</script>

<style lang="less" scoped>
.festival_main {
  width: 100%;
  height: 100%;
  background: white;
  padding: 20px;
  /deep/.card_main {
    .ant-card-head-title {
      font-size: 3em;
    }
  }
  .card_list {
    float: left;
  }
  .card_list::after {
    content: "";
    clear: both;
  }

  .card_add {
    width: 30em;
    display: inline-block;
    margin: 0 10px;
    height: 25em;
    color: #eee;
    float: left;
    /deep/.ant-card-body {
      width: 100%;
      height: 100%;
    }
  }
  .card_add:hover {
    color: rgb(134, 133, 133);
  }
  .card_add::after {
    clear: both;
  }
}
</style>
